<template>
    <div class="pageCon">
        <div class="bc"></div>
        <div class="main">
            <HomePara>
                <template #content>
                    <GoodsList :items="recommendList"></GoodsList>
                </template>
            </HomePara>
        </div>

    </div>
</template>
<script setup>
import GoodsList from '@/components/GoodsList.vue'
import { ref } from 'vue'
import HomePara from '@/components/HomeParagraph.vue'

const recommendList = ref([
{
        "img": "https://static.mcake.com/new_goods/zhenzinaiyounapolun/list/1.jpg",
        "sku": "C1601",
        "spec": "1.5磅",
        "name": "榛子奶油拿破仑",
        "french": "Napoléon au crème de noisette",
        "title": "榛子奶油拿破仑",
        "subtitle": "Napoléon au crème de noisette",
        "price": "218.00",
        "amount": "218.00",
        "url": "/product/C1601",
        "pcListImg": "https://static.mcake.com//uploads/2024/09/10/492c76c9415d62853dbd111367c5c039bbb17af9.jpg",
        "sceneImg": "https://static.mcake.com//uploads/2024/04/23/a2640a357198bb3c9b93c75af96c265aec4545b6.jpg"
    },
    {
        "img": "https://static.mcake.com//uploads/2024/04/03/21d07a2d951f665d18f1699f96a72e75ab57ecde.png",
        "sku": "c0301",
        "spec": "1磅",
        "name": "蔓越莓红丝绒",
        "french": "Velour rouge",
        "title": "蔓越莓红丝绒",
        "subtitle": "Velour rouge",
        "price": "198.00",
        "amount": "198.00",
        "url": "/product/c0301",
        "pcListImg": "https://static.mcake.com//uploads/2024/04/03/ea4406f1669912b6024c9f733ed78aa6f1fdcc70.jpg",
        "sceneImg": "https://static.mcake.com//uploads/2024/04/03/8fa0663251e43ca00b388f7961c385ae6911a1b9.jpg"
    },
    {
        "img": "https://static.mcake.com//uploads/2024/04/03/b481cdc20ab4a22028393da3fd6ecbd0fd9f0d81.png",
        "sku": "C9001",
        "spec": "1磅",
        "name": "榛子奶油",
        "french": "Crème de noisette",
        "title": "榛子奶油",
        "subtitle": "Crème de noisette",
        "price": "198.00",
        "amount": "198.00",
        "url": "/product/C9001",
        "pcListImg": "https://static.mcake.com//uploads/2024/04/03/6be9f66eab6d58f9a46d8ef77f1c4b07c68d26af.jpg",
        "sceneImg": "https://static.mcake.com//uploads/2024/04/03/522e3124e4be292c11b761141bd0175341c43235.jpg"
    },
    {
        "img": "https://static.mcake.com//uploads/2024/05/10/30743c70d2a80129191e74c53c273fc6cf535e9d.jpg",
        "sku": "n0301",
        "spec": "1磅",
        "name": "蓝莓轻乳拿破仑",
        "french": "Napoléon aux myrtilles",
        "title": "蓝莓轻乳拿破仑",
        "subtitle": "Napoléon aux myrtilles",
        "price": "198.00",
        "amount": "198.00",
        "url": "/product/n0301",
        "pcListImg": "https://static.mcake.com//uploads/2024/05/10/30743c70d2a80129191e74c53c273fc6cf535e9d.jpg",
        "sceneImg": "https://static.mcake.com//uploads/2024/04/03/179b591e17ff851defe8d9dd8cd0782b89e6f02c.jpg"
    },    {
        "img": "https://static.mcake.com/new_goods/zhenzinaiyounapolun/list/1.jpg",
        "sku": "C1601",
        "spec": "1.5磅",
        "name": "榛子奶油拿破仑",
        "french": "Napoléon au crème de noisette",
        "title": "榛子奶油拿破仑",
        "subtitle": "Napoléon au crème de noisette",
        "price": "218.00",
        "amount": "218.00",
        "url": "/product/C1601",
        "pcListImg": "https://static.mcake.com//uploads/2024/09/10/492c76c9415d62853dbd111367c5c039bbb17af9.jpg",
        "sceneImg": "https://static.mcake.com//uploads/2024/04/23/a2640a357198bb3c9b93c75af96c265aec4545b6.jpg"
    },
    {
        "img": "https://static.mcake.com//uploads/2024/04/03/21d07a2d951f665d18f1699f96a72e75ab57ecde.png",
        "sku": "c0301",
        "spec": "1磅",
        "name": "蔓越莓红丝绒",
        "french": "Velour rouge",
        "title": "蔓越莓红丝绒",
        "subtitle": "Velour rouge",
        "price": "198.00",
        "amount": "198.00",
        "url": "/product/c0301",
        "pcListImg": "https://static.mcake.com//uploads/2024/04/03/ea4406f1669912b6024c9f733ed78aa6f1fdcc70.jpg",
        "sceneImg": "https://static.mcake.com//uploads/2024/04/03/8fa0663251e43ca00b388f7961c385ae6911a1b9.jpg"
    },
    {
        "img": "https://static.mcake.com//uploads/2024/04/03/b481cdc20ab4a22028393da3fd6ecbd0fd9f0d81.png",
        "sku": "C9001",
        "spec": "1磅",
        "name": "榛子奶油",
        "french": "Crème de noisette",
        "title": "榛子奶油",
        "subtitle": "Crème de noisette",
        "price": "198.00",
        "amount": "198.00",
        "url": "/product/C9001",
        "pcListImg": "https://static.mcake.com//uploads/2024/04/03/6be9f66eab6d58f9a46d8ef77f1c4b07c68d26af.jpg",
        "sceneImg": "https://static.mcake.com//uploads/2024/04/03/522e3124e4be292c11b761141bd0175341c43235.jpg"
    },
    {
        "img": "https://static.mcake.com//uploads/2024/05/10/30743c70d2a80129191e74c53c273fc6cf535e9d.jpg",
        "sku": "n0301",
        "spec": "1磅",
        "name": "蓝莓轻乳拿破仑",
        "french": "Napoléon aux myrtilles",
        "title": "蓝莓轻乳拿破仑",
        "subtitle": "Napoléon aux myrtilles",
        "price": "198.00",
        "amount": "198.00",
        "url": "/product/n0301",
        "pcListImg": "https://static.mcake.com//uploads/2024/05/10/30743c70d2a80129191e74c53c273fc6cf535e9d.jpg",
        "sceneImg": "https://static.mcake.com//uploads/2024/04/03/179b591e17ff851defe8d9dd8cd0782b89e6f02c.jpg"
    },    {
        "img": "https://static.mcake.com/new_goods/zhenzinaiyounapolun/list/1.jpg",
        "sku": "C1601",
        "spec": "1.5磅",
        "name": "榛子奶油拿破仑",
        "french": "Napoléon au crème de noisette",
        "title": "榛子奶油拿破仑",
        "subtitle": "Napoléon au crème de noisette",
        "price": "218.00",
        "amount": "218.00",
        "url": "/product/C1601",
        "pcListImg": "https://static.mcake.com//uploads/2024/09/10/492c76c9415d62853dbd111367c5c039bbb17af9.jpg",
        "sceneImg": "https://static.mcake.com//uploads/2024/04/23/a2640a357198bb3c9b93c75af96c265aec4545b6.jpg"
    },
    {
        "img": "https://static.mcake.com//uploads/2024/04/03/21d07a2d951f665d18f1699f96a72e75ab57ecde.png",
        "sku": "c0301",
        "spec": "1磅",
        "name": "蔓越莓红丝绒",
        "french": "Velour rouge",
        "title": "蔓越莓红丝绒",
        "subtitle": "Velour rouge",
        "price": "198.00",
        "amount": "198.00",
        "url": "/product/c0301",
        "pcListImg": "https://static.mcake.com//uploads/2024/04/03/ea4406f1669912b6024c9f733ed78aa6f1fdcc70.jpg",
        "sceneImg": "https://static.mcake.com//uploads/2024/04/03/8fa0663251e43ca00b388f7961c385ae6911a1b9.jpg"
    },
    {
        "img": "https://static.mcake.com//uploads/2024/04/03/b481cdc20ab4a22028393da3fd6ecbd0fd9f0d81.png",
        "sku": "C9001",
        "spec": "1磅",
        "name": "榛子奶油",
        "french": "Crème de noisette",
        "title": "榛子奶油",
        "subtitle": "Crème de noisette",
        "price": "198.00",
        "amount": "198.00",
        "url": "/product/C9001",
        "pcListImg": "https://static.mcake.com//uploads/2024/04/03/6be9f66eab6d58f9a46d8ef77f1c4b07c68d26af.jpg",
        "sceneImg": "https://static.mcake.com//uploads/2024/04/03/522e3124e4be292c11b761141bd0175341c43235.jpg"
    },
    {
        "img": "https://static.mcake.com//uploads/2024/05/10/30743c70d2a80129191e74c53c273fc6cf535e9d.jpg",
        "sku": "n0301",
        "spec": "1磅",
        "name": "蓝莓轻乳拿破仑",
        "french": "Napoléon aux myrtilles",
        "title": "蓝莓轻乳拿破仑",
        "subtitle": "Napoléon aux myrtilles",
        "price": "198.00",
        "amount": "198.00",
        "url": "/product/n0301",
        "pcListImg": "https://static.mcake.com//uploads/2024/05/10/30743c70d2a80129191e74c53c273fc6cf535e9d.jpg",
        "sceneImg": "https://static.mcake.com//uploads/2024/04/03/179b591e17ff851defe8d9dd8cd0782b89e6f02c.jpg"
    },    {
        "img": "https://static.mcake.com/new_goods/zhenzinaiyounapolun/list/1.jpg",
        "sku": "C1601",
        "spec": "1.5磅",
        "name": "榛子奶油拿破仑",
        "french": "Napoléon au crème de noisette",
        "title": "榛子奶油拿破仑",
        "subtitle": "Napoléon au crème de noisette",
        "price": "218.00",
        "amount": "218.00",
        "url": "/product/C1601",
        "pcListImg": "https://static.mcake.com//uploads/2024/09/10/492c76c9415d62853dbd111367c5c039bbb17af9.jpg",
        "sceneImg": "https://static.mcake.com//uploads/2024/04/23/a2640a357198bb3c9b93c75af96c265aec4545b6.jpg"
    },
    {
        "img": "https://static.mcake.com//uploads/2024/04/03/21d07a2d951f665d18f1699f96a72e75ab57ecde.png",
        "sku": "c0301",
        "spec": "1磅",
        "name": "蔓越莓红丝绒",
        "french": "Velour rouge",
        "title": "蔓越莓红丝绒",
        "subtitle": "Velour rouge",
        "price": "198.00",
        "amount": "198.00",
        "url": "/product/c0301",
        "pcListImg": "https://static.mcake.com//uploads/2024/04/03/ea4406f1669912b6024c9f733ed78aa6f1fdcc70.jpg",
        "sceneImg": "https://static.mcake.com//uploads/2024/04/03/8fa0663251e43ca00b388f7961c385ae6911a1b9.jpg"
    },
    {
        "img": "https://static.mcake.com//uploads/2024/04/03/b481cdc20ab4a22028393da3fd6ecbd0fd9f0d81.png",
        "sku": "C9001",
        "spec": "1磅",
        "name": "榛子奶油",
        "french": "Crème de noisette",
        "title": "榛子奶油",
        "subtitle": "Crème de noisette",
        "price": "198.00",
        "amount": "198.00",
        "url": "/product/C9001",
        "pcListImg": "https://static.mcake.com//uploads/2024/04/03/6be9f66eab6d58f9a46d8ef77f1c4b07c68d26af.jpg",
        "sceneImg": "https://static.mcake.com//uploads/2024/04/03/522e3124e4be292c11b761141bd0175341c43235.jpg"
    },
    {
        "img": "https://static.mcake.com//uploads/2024/05/10/30743c70d2a80129191e74c53c273fc6cf535e9d.jpg",
        "sku": "n0301",
        "spec": "1磅",
        "name": "蓝莓轻乳拿破仑",
        "french": "Napoléon aux myrtilles",
        "title": "蓝莓轻乳拿破仑",
        "subtitle": "Napoléon aux myrtilles",
        "price": "198.00",
        "amount": "198.00",
        "url": "/product/n0301",
        "pcListImg": "https://static.mcake.com//uploads/2024/05/10/30743c70d2a80129191e74c53c273fc6cf535e9d.jpg",
        "sceneImg": "https://static.mcake.com//uploads/2024/04/03/179b591e17ff851defe8d9dd8cd0782b89e6f02c.jpg"
    },
])
</script>

<style scoped lang="scss">
.pageCon {
    display: flex;
    flex-direction: column;
    align-items: center;

    .bc {
        width: 100%;
        height: 35rem;
        background-image: url('@/assets/cakeStoreBc.jpg');
        background-size: cover;
        background-position: center;
    }

    .main {
        margin-top: 30px;
        width: 90%;
    }

}
</style>